<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#box { color:green; }
.red { color:red; }
.blue {color:blue; background-color:#FFFFFF;}
</style>
<script>
window.onload = function(){ 
	    var styleSheets = document.styleSheets[0];			//获取样式表引用指针
	    var index = styleSheets.length; 					//获取样式表中包含样式的个数
	    if(styleSheets.insertRule){ 						//判断浏览器是否支持
			styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
	    }else{
		    styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
	    }
    var p = document.getElementsByTagName("p")[0];
	    if( window.getComputedStyle)
		    p.innerHTML =  "背 景 色："+window.getComputedStyle(p,null).backgroundColor+"<br>字体颜色："+window.getComputedStyle(p,null).color;
	    else if( p.currentStyle)
		    p.innerHTML =  "背 景 色："+p.currentStyle.backgroundColor+"<br>字体颜色："+p.currentStyle.color;
	    else
	        	p.innerHTML =  "当前浏览器无法获取最终显示样式";
}
</script>
</head>
<body>
<p class="blue">在样式表中增加样式操作</p>
</body>
</html> 
